<template>
  <div class="body">
    <!-- titlebar 标题栏 -->
    <div class="title">
      <img class="back" src="../assets/back.png" alt="" @click="back" />
      快递服务
      <img class="more" src="../assets/bar.png" alt="" @click="more" />
    </div>

    <!-- 中间搜索框 -->

    <div class="content">
      <div class="search">
        <!-- <SnInput v-model="valueText" :placeholder="tips" :maxlength="50" clear /> -->
        <input type="text" :placeholder="tips" class="scan" />
        <img src="../assets/sacn.png" alt="" />
      </div>
    </div>

    <!-- 中间服务展示框 -->
    <div class="content2">
      <!--左边上门取件盒子 -->
      <div class="leftbox box">
        <img src="../assets/box.jpg" alt="" />
        <span class="firstspan">上门取件</span>
        <span>便捷、快速</span>
      </div>

      <!-- 右边的盒子 -->

      <div class="rightbox box">
        <img src="../assets/bus.jpg" alt="" />
        <span class="firstspan">同城急送</span>
        <span>高效、快速</span>
      </div>
    </div>
    <!-- 引用兆日的组件库 tab栏-->

    <div class="tabs">
      <SnTabs v-model="active1" animated swipeable>
        <SnTab v-for="item in tabs" :key="item.id" :title="item.title">
          内容 {{ item.id }}
        </SnTab>
      </SnTabs>

      <!-- <SnTabs v-model="active1" animated swipeable>
        <SnTab v-for="index in tabs" :key="index" :title="'标签 ' + index">
          内容 {{ index }}
        </SnTab>
      </SnTabs> -->
    </div>
  </div>
</template>

<script>
import { SnTabs, SnTab } from "sinosun-ui";
export default {
  data: function () {
    return {
      tips: "输入或扫一扫快递单号",
      valueText: "",
      tabs: [
        { id: 1, title: "搜索历史" },
        { id: 2, title: "我收的" },
        { id: 3, title: "我寄的" },
      ],
      active1: 0,
    };
  },
  components: {
    SnTabs,
    SnTab,
  },
  methods: {
    back: function () {
      this.$message({
        showClose: true,
        message: "警告哦，该功能暂未实现",
        type: "warning",
      });
    },
    more: function () {
      this.$message({
        showClose: true,
        message: "该功能暂未实现",
        type: "warning",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.content2 {
  background-color: #ffffff;
  border-radius: 0.09999975rem 0.09999975rem 0 0;
  margin-top: -1.05999975rem;
  position: relative;
  z-index: 999;
  width: 100%;
  height: 2.7rem;
}

.box {
  width: 3.24rem;
  height: 1.8rem;
  position: absolute;
  top: 0.50000025rem;
  box-shadow: 0px 4px 15px -2px rgba(0, 70, 199, 0.18);
  border-radius: 8px;
  bottom: 0.39999975rem;
}

.box img {
  width: 0.6rem;
  height: 0.50000025rem;
  position: relative;
  top: 0.57999975rem;
  left: 0.48rem;
}

.box .firstspan {
  width: 1.35999975rem;
  position: absolute;
  top: 0.36rem;
  right: 0.51999975rem;
  height: 0.48rem;
  font-size: 0.33999975rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 0.48rem;
}
.box span:last-child {
  width: 1.29999975rem;
  height: 0.36rem;
  font-size: 0.26000025rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 0.36rem;
  position: absolute;
  top: 0.92000025rem;
  right: 0.57999975rem;
}

.leftbox {
  background-color: #2656d9;
  left: 0.3rem;
}

.rightbox {
  right: 0.3rem;
  background-color: #64c0f9;
}

.scan {
  position: absolute;
  top: 0px;
  left: 0.3rem;
  width: 6.9rem;
  border-radius: 0.08000025rem;
  font-size: 0.3rem;
  color: #c2c2c2;
  padding: 0.3rem;
  background-color: #ffffff;
}

.search {
  height: 0.80000025rem;
  line-height: 0.80000025rem;
  width: 100%;
  position: relative;
}

.search img {
  position: absolute;
  right: 0.50000025rem;
  top: 0.18rem;
  width: 0.44000025rem;
  height: 0.44000025rem;
}

.content {
  padding-top: 0.56000025rem;
  background-color: #4e59ee;
  text-align: center;
  width: 100%;
  height: 3rem;
}
.body {
  background-color: #ffffff;
}
* {
  padding: 0px;
  margin: 0px;
}
.title {
  position: relative;
  font-size: 0.36rem;
  text-align: center;
  color: #333333;
  height: 0.44000025rem;
  margin-top: 0.62000025rem;
  margin-left: 0.39999975rem;
  margin-right: 0.39999975rem;
  margin-bottom: 0.266667rem;
}
.title img {
  position: absolute;
  width: 0.44000025rem;
  height: 0.44000025rem;
}
.title .back {
  top: 0px;
  left: 0px;
}

.title .more {
  top: 0px;
  right: 0px;
}
</style>